<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../../static/css/aui.min.css"/>
		<title>侧边选项卡-左右联动</title>
		<style>
			.content-left-scroll{width: 120px; height: -webkit-calc(100vh - 50px); height: calc(100vh - 50px); background: #F4F4F4; overflow: hidden; overflow-y: scroll; display: inline-block; position: absolute; top: 50px; left: 0;}
			.content-left-warp{width: 100%; height: auto;} 
			.content-left-scroll li{width: 100%; height: 55px; line-height: 55px; text-align: center; font-size: 15px; color: #333;}
			.content-left-scroll li.active{width: 121px; color: var(--aui-color); background: #FFF; position: relative; z-index: 2;}
			.content-left-scroll li.active:before{content: ''; width: 2px; height: 55px; background: var(--aui-bg); border-radius: 3px; position: absolute; top: 0; left: 0;}
			.content-right-scroll{width: -webkit-calc(100vw - 120px); width: calc(100vw - 120px); height: -webkit-calc(100vh - 50px); height: calc(100vh - 50px); background: #FFF; overflow: hidden; overflow-y: scroll; position: absolute; top: 50px; left: 120px;}
			.content-right-warp{width: 100%; height: auto; padding: 15px 10px; box-sizing: border-box; font-size: 0;}
			.content-right-scroll .banner{width: 100%; margin-bottom: 10px;}
			.content-right-scroll .banner img{width: 100%;}
			.content-right-scroll li{width: 33.33%; margin-bottom: 10px; padding: 0 0px; box-sizing: border-box; text-align: center; display: inline-block; vertical-align: top;}
			.content-right-scroll li img{width: 40px; margin-bottom: 5px;}
			.content-right-scroll li p{width: 100%; line-height: 20px; font-size: 12px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
		</style>
	</head>
	<body>		
	    <div class="container" id="app">
			<header class="aui-header">
				<a class="aui-header-left" onclick="aui.closeWin()"><i class="iconfont iconreturn"></i></a>
				<div class="aui-header-title">侧边选项卡-左右联动</div>
			</header>
	    	<div class="aui-content" v-cloak  >				
				<div class="content-left-scroll col-after">
					<div class="content-left-warp">
						<ul>
							<li class="row-after" v-for="(item, index) in items.leftData" :class="{'active' : currentLeftIndex==index}" :index="index" @click.stop="chooseLeftLi($event)">{{item.name}}</li>
						</ul>
					</div>
				</div>
				<div class="content-right-scroll">
					<div class="content-right-warp">
						<ul v-for="(item, index) in items.rightData">
							<div class="banner"><img src="../../../static/img/image/banner.png" alt=""></div>
							<li v-for="list in item">
								<div class="img"><img :src="list.img" alt=""></div>
								<p class="name">{{list.name}}</p>
							</li>
						</ul>
					</div>
				</div>
	    	</div>			
	    </div>
		<script type="text/javascript" charset="utf-8" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
	    <script type="text/javascript" src="../../../lib/vue.min.js"></script>
	    <script type="text/javascript" src="../../../lib/jquery/jquery-2.1.3.min.js"></script>
	    <script type="text/javascript" src="../../../static/js/aui.min.js"></script>
	   	<script type="text/javascript">
	   		window.onload = function(){				
	   			apiready();
	   		}
	   		apiready = function() {
	   			var vm = new Vue({
	   				el: "#app",
	   				data: {							   											
						currentLeftIndex: 0,
						items: {
							leftData: [],
							rightData: []
						},
	   				},
	   				created: function(){
	   					var _this = this;
						
	   				},
	   				mounted: function() {
	   					var _this = this;	
						_this.getData();
						_this.scrollRight();
	   	            },
	   	            updated: function () {
	   	                var _this = this;
	   	                _this.$nextTick(function () {
	   		
	   	                })
	   	            },
	   	            methods: {
						getData(){
							var _this = this;
							for(var i = 0; i < 10; i++){
								_this.items.leftData.push({
									name: '一级菜单'+(i+1), 
									id: i,
								});
								var arr = [];
								for(var j = 0; j < 15; j++){
									arr.push({
										name: '二级菜单'+(i+1)+'-'+(j+1), id: i, 
										img: 'http://pic2.sc.chinaz.com/files/pic/pic9/201910/bpic14122.jpg',
									});
								}
								_this.items.rightData.push(arr);
							}
						},
						//左侧选择
						chooseLeftLi(e){
							var _this = this,
								el = e.currentTarget,								
								index = Number($(el).attr("index"));
							_this.currentLeftIndex = index;
							$(".content-left-scroll").animate({
								scrollTop: e.currentTarget.offsetTop - ($(window).height() - $(el).height() - 54) / 2
							},200);
							$(".content-right-scroll").animate({
								scrollTop: document.querySelector(".content-right-warp ul:nth-child("+ (index + 1) +")").offsetTop - 10
							},0);									
						},	
						scrollRight(){
							var _this = this;
							$(".content-right-scroll").on("touchmove touchend", function(){
								var self = this;
								for(var i = 0; i < $(".content-right-warp ul").length; i++){
									!(function(index){
										if(index > 0){
											var T = $(self).scrollTop();
											var RT = document.querySelector(".content-right-warp ul:nth-child("+ (index) +")").offsetTop;
											var RT_PRE = document.querySelector(".content-right-warp ul:nth-child("+ (index + 1) +")").offsetTop;
											var LT = document.querySelector(".content-left-scroll li:nth-child("+ (index) +")").offsetTop;
											var LH = document.querySelector(".content-left-scroll li:nth-child("+ (index) +")").offsetHeight;
											if(T >= RT){
												_this.currentLeftIndex = index - 1;
												$(".content-left-scroll").animate({
													scrollTop: LT - ($(window).height() - LH - 54) / 2
												},0);
												if(T >= RT_PRE){
													_this.currentLeftIndex = index;
												}
											}
										}
									})(i);									
								}
							});
						},
	   	            }
	   			});
	   		}
	   	</script>
	</body>
</html>
